<template>
  <div class="panel">
    <vue3-seamless-scroll
      :list="warningListRef"
      :step="stepRef"
      :hover="hoverRef"
      :limitScrollNum="limitScrollNumRef"
      :wheel="wheelRef"
      :direction="directionRef"
      class="seamless-warp"
    >
      <div class="warning-info">
        <div v-for="(item, index) in warningList" :key="index" class="warning-item">
          <div class="warning-icon" :class="item.level">
            <el-icon><Warning /></el-icon>
          </div>
          <div class="info-column">
            <div class="warning-title">{{ item.title }}</div>
            <div class="warning-time">{{ item.time }}</div>
          </div>
          <div class="info-column">
            <div class="info-item">
              <span class="label">区域：</span>
              <span class="value">{{ item.area }}</span>
            </div>
            <div class="info-item">
              <span class="label">状态：</span>
              <span class="value" :class="item.status">{{ item.statusText }}</span>
            </div>
          </div>
        </div>
      </div>
    </vue3-seamless-scroll>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import { Warning } from '@element-plus/icons-vue'

// 模拟数据
const warningList = [
  {
    title: '温度异常预警',
    time: '2024-04-03 15:05:36',
    area: '温室1号',
    level: 'urgent',
    status: 'pending',
    statusText: '待处理'
  },
  {
    title: '湿度超标预警',
    time: '2024-04-03 14:50:18',
    area: '温室2号',
    level: 'warning',
    status: 'processing',
    statusText: '处理中'
  },
  {
    title: '光照不足预警',
    time: '2024-04-03 14:25:33',
    area: '温室3号',
    level: 'notice',
    status: 'resolved',
    statusText: '已解决'
  },
  {
    title: 'CO2浓度异常',
    time: '2024-04-03 13:40:57',
    area: '温室4号',
    level: 'warning',
    status: 'pending',
    statusText: '待处理'
  },
  {
    title: '土壤湿度异常',
    time: '2024-04-03 13:20:45',
    area: '温室5号',
    level: 'notice',
    status: 'processing',
    statusText: '处理中'
  }
]

const warningListRef = ref(warningList) as any
const stepRef = ref(0.5) as any
const hoverRef = ref(true) as any
const limitScrollNumRef = ref(2) as any
const wheelRef = ref(true) as any
const directionRef = ref<'up' | 'down' | 'left' | 'right'>('up') as any
</script>

<style scoped>
.panel {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.seamless-warp {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.warning-info {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.warning-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 20px;
  border: 1px solid rgba(51, 255, 208, 0.3);
  border-radius: 10px;
  background: rgba(51, 255, 208, 0.05);
  margin-bottom: 10px;
  height: 100px;
}

.warning-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.warning-icon.urgent {
  background: rgba(245, 108, 108, 0.2);
  color: #f56c6c;
}

.warning-icon.warning {
  background: rgba(230, 162, 60, 0.2);
  color: #e6a23c;
}

.warning-icon.notice {
  background: rgba(144, 147, 153, 0.2);
  color: #909399;
}

.warning-icon .el-icon {
  font-size: 24px;
}

.info-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.warning-title {
  color: #33ffd0;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
}

.warning-time {
  color: #fff;
  font-size: 14px;
  opacity: 0.8;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.label {
  color: #33ffd0;
  font-size: 14px;
  min-width: 50px;
}

.value {
  color: #fff;
  font-size: 14px;
}

.value.pending {
  color: #f56c6c;
}

.value.processing {
  color: #e6a23c;
}

.value.resolved {
  color: #67c23a;
}
</style> 